Visitando Cosas Sencillas he visto un enlace a Marcofolio donde habla de "8 formas diferentes de añadir bonitos estilos a nuestras listas". Con Explorer el efecto del siguiente ejemplo se pierde, pero aún así no he podido resistirme a probarlo.


Estilos CSS antes de ]]></b:skin>

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

En HTML:

<div id="list8">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

JMH

Hola!
Me Gustó Mucho!!! Gracias por la información... cuando tenga algo de tiempo para cambiar (pelearme con) el HTML lo voy a probar.
Saludos

Responder
Gem@

Todo tuyo JMH

Responder
Anónimo

disculpame Gem@, sabes como cambiar el texto que aparece al lado de publicar un comentario, que dice: ¨suscripción por correo electronico¨, por una imagen?
Saludos!

Responder
Matius Lenin

Todos se enojan de que Internet Explorer no respete los estándares y Firefox se da sus viajes.

Lo único malo de esto es que nunca lo veremos en ninguna especificación, lo que resulta inútil para diseños serios.

Responder
Gem@

HE-MARVEL a ese texto no tenemos acceso, lo único que se puede cambiar si no me equivoco es el color del enlace.

Matius eso es como escoger ver la televisión en blanco y negro o en color. Cada uno escoge lo que más le gusta.
Cuando se crea un diseño hay que ser consciente que las visitas pueden utilizar distintos navegadores, no veo por qué prescindir de algo sólo porque un navegador no lo interpreta.

Responder
Toni

Gracias Gem@, un saludo.

Responder
Gem@

Hola Toni, gracias por comentar

Responder
Mercier mc

Felicidades por el blog Gema

Está muy guay

Responder
Bocha

Gema, no encuentro el gadget de "La frase del dia", el que cambia cada vez que actualizas la pagina. Me podrías ayudar??

donde esta? cual es??

Responder
Gem@

Gracias Mercier

Bocha yo tampoco sé donde está, k_nelita dice que ella lo añadió desde ahí es cuestión de buscar

Responder
Unknown

Buen post Gem@ ... pero me gustaría hacerte una consulta, no se si se puede hacer una especie de menú desplegable en la sidebar que al expandirlo muestre una serie de imágens... me gustaría saber si se puede hacer eso para poner los banners de las páginas que enlazo sin tener que gastar demasiado espacio en el blog... no se si me explico lo que quiero hacer...

Responder
Unknown

Gem@, acabo de fijarme que si tienes eso aqui... ... pero no encuentro como hacerlo

Responder
Gem@

Alexnex ¿aquí dónde?

Responder
Unknown

emmm.... jaja.. bueno, mas o menos, lo que quiero hacer es lo que tienes en la sidebar lo que dice "directorios", cuando lo presionas te salen links con imágenes, quisiera hacer lo mismo pero con los banners... me explico?? ...

Responder
HLVS

hola Gema, espero estes muy bien.

te queria pedir una ayudita en lo siguiente:
en en la parte inferior del reconocido blog Oloblogger existen unos antipixeles organizados de forma horizontal, mi pregunta es, como hago ese orden para que cada antipixel me quede uno al lado de otro???

agradezco tu colaboracion Gemita y gracias de antemano

Responder
Henry

Hola Gema que sabes tu de la nueva novedad de blogger, verdad que se ve bonita la ventana al crear un post, con el siguiente mensaje:

El servidor API de Google Maps ha rechazado tu solicitud. El parámetro "sensor" especificado en la solicitud debe estar definido en "true" o "false"

Siempre hay novedades en blogger

Responder
Gem@

Lo expliqué hace poquitos días, faltaste a clase
El efecto que yo tengo se llama slide.

HLVS eso lo puedes añadir en un gadget de html del footer (al final del blog)
En su interior añades por ejemplo:
<div class="directorios"> código de los botones uno seguido de otro </div>
De esa forma hemos creado un bloque que más tarde podemos añadir estilos.
A los estilos del bloque le llamaríamos directorios.

Hola Henry la nueva novedad que no vengan muchas así. Ese problema se presenta cuando accedemos al editor por Blogger Draft.
(Es la última novedad creo)

Responder
Gem@

El primer comentario anterior era para ti Alexnex, siento el olvido

Responder
Unknown

jaja... perdon por faltar a clases es la facultad, me tiene perdido, jaja saludo Gem@ graciass:

Responder
Admin

Holaaa Para Bocha: mirá esta página
Y si vas a la página principal del mismo sitio, tenés millones de gadget de todo tipo y color, pero esa es la de las frases, en el buscador ponés lo que quieras buscar y vualá, ahí está jaja
Suerte

Responder
Gem@

Alexnex lo primero es lo primro

k_nelita gracias, gracias, gracias

Responder
Admin

De nada, de nada, de nada ja jaaa
Estaba mirando la página que recomiendas Marcofolio y realmente la lista mas bonita es la que pusiste gem@, por no decir que es la única que me gusta ja jaa siempre tenemos el mismo gusto
Besotes ♥ ♥ ♥

Responder
Admin

Acá otro aporte para Bocha, esta vez de la mano de JAVI, que lo vi en su blog y le pregunté, este gadget se actualiza solo no hace falta recargar la página, queda muy bonito y lo podés configurar a tu gusto colores, etc. ENLACE
Espero te sirva Bocha, o alguno de los otros.
Saludos

Responder
Gem@

Más gracias k_nelita

Responder
Unknown

Kaixo Gema, me gusta este efecto y me preguntaba si seria posible poner una imagen junto a cada linea, osea (imagen) Home
(Imagen) Blog.....

Gracias

Responder
Unknown

Ya lo hice, agregando antes de background color esto:

background:url(url de la imagen) no-repeat left;

left: para la imagen a la izquierda, center para centrarlo y right para la derecha

entonces quedaria algo asi:


/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; url(url de la imagen) no-repeat left; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top
cargando